// 创建 3d 饼图
import * as am4charts from "@amcharts/amcharts4/charts"
import * as am4core from "@amcharts/amcharts4/core"

// import createPieChart3D from "../../../utils/createPieChart3D"

// createPieChart3D(chartRef, myChart, data)

// domRef, 存储实例的ref, 数据对象
const createPieChart3D = (ref, myChart, data) => {
  if (myChart.current) return
  const chart = am4core.create(ref.current, am4charts.PieChart3D)
  chart.hiddenState.properties.opacity = 0 // this creates initial fade-in
  chart.width = am4core.percent(100)

  // 图例配置
  // chart.legend = new am4charts.Legend()
  // chart.legend.position = "right"
  // chart.legend.width = 180
  // chart.legend.height = am4core.percent(60)

  chart.data = data
  chart.angle = 60
  chart.depth = 10
  chart.fontSize = 12
  chart.tooltip.label.fontSize = 12
  chart.logo.disabled = true

  const series = chart.series.push(new am4charts.PieSeries3D())
  series.dataFields.value = "value"
  series.dataFields.category = "name"
  series.colors.list = data.map((item) => am4core.color(item.color))

  series.ticks.template.stroke = am4core.color("#000000")
  series.ticks.template.strokeOpacity = 0.8

  // series.labels.template.disabled = true
  series.labels.template.html = `<div><span>{category}</span><span>({value})</span></div>`

  // 使指示线颜色与对应饼块一致
  series.ticks.template.adapter.add("stroke", function (fill, target) {
    if (target.dataItem && target.dataItem.slice) {
      return target.dataItem.slice.fill
    }
    return fill
  })
  series.radius = am4core.percent(110)

  series.slices.template.states.getKey("active").properties.distance = 20 // 分离距离
  series.slices.template.states.getKey("active").properties.shiftDistance = 1.6 // 3D高度变化
}

export default createPieChart3D
